<template>
  <div class="app-container calendar-list-container">
    <buttons :showQuery="true" :showBack="false" @query="doQuery" :list="btnList" :disabled="disabled" placeholder="订单号" :permissions="permissions" @printAll="doPrintAll">
    </buttons>
    <grid gridTitle="商品明细" :url="url" :columns="columns" :enableEdit="false" :loading="true" ref="mainGrid" height="auto" diffHeight="105" :pagination="false"
      :permissions="permissions" :multi="false" @change="rowCilck" :queryEntity="queryEntity" @print="doPrint" @printNumber="doPrintNumber">
    </grid>
  </div>
</template>
<script>
import request from '@/router/axios'
import { Message, MessageBox } from 'element-ui'
import url from '@/const/apiURL'
import grid from '@/components/Grid'
import buttons from '@/components/Buttons'
import { mapGetters } from 'vuex'
import { BusinessOrderStatusFormatter, BusinessTypeFormatter, YesOrNoFormatter } from '@/const/dict'
import { colunms } from '@/const/colunms'
import { dict } from '@/const/dict'
import { queryField } from '@/const/query'
import { getLodop } from '@/const/lodop'


export default {
  components: { grid, buttons },
  data () {
    return {
      template: null,
      url: url.BUSINESS_IN_LIST_URL,
      entity: {},
      queryEntity: { key: 'key' },
      disabled: true,
      columns: [
        {
          label: '操作', width: 160, prop: 'op', align: 'center', template: 'op', opList: [
            { name: '打印', clickName: 'print', auth: 'yes' }, { name: '打印序列号', clickName: 'printNumber', auth: 'yes' }
          ]
        },
        { label: this.global.modelName, width: 60, prop: 'goodsName', align: 'center' },
        { label: this.global.modelProp, width: 60, prop: 'modelProp', align: 'center' },
        { label: '物料名称', width: 300, prop: 'materialName', align: 'center' },
        { label: '克重', width: 100, prop: 'weight', align: 'center' },
        // { label: '物料类型', width: 80, prop: 'materialTypeName', align: 'center' },
        { label: '单位', width: 80, prop: 'unit', align: 'center' },
        { label: '序列号', width: 120, prop: 'serialNumber', align: 'center' },
        // { label: '批次号', width: 140, prop: 'batchNo', align: 'center' },
        { label: '毛重', width: 100, prop: 'goodsWeight', align: 'center' },
        { label: '净重', width: 100, prop: 'goodsNetWeight', align: 'center' },
        { label: '缸号', width: 160, prop: 'gangNo', align: 'center' },
        { label: '数量', width: 80, prop: 'quantity', align: 'center' },
        { label: '顺序', width: 80, prop: 'indexSort', align: 'center' },
        { label: '备注', width: 155, prop: 'remark', align: 'center' }
      ],
      btnList: [
        { name: '打印', type: 'primary', icon: 'edit', click: 'printAll', auth: 'yes', ctr: false }
      ]
    }
  },
  created () {
    this.queryEntity.businessCode = this.$route.query.businessCode
    this.initLodop()
    this.initTemplate(this.$route.query.orderNo)
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    doQuery (text) {
      this.$refs['mainGrid'].doQuery(text)
    },
    rowCilck (row) {
      this.disabled = row.length == 0
    },
    doPrintAll () {
      let _this = this
      if (this.template) {
        MessageBox.confirm('是否打印?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //查询数据
          this.printAllOp(this.queryEntity.businessCode).then(data => {
            if (data) {
              data.forEach((item, index) => {
                eval(_this.template)
                item.forEach((citem, cindex) => {
                  LODOP.SET_PRINT_STYLEA(citem.propertyName, "CONTENT", citem.propertyValue);
                })
                //LODOP.PRINT()
                LODOP.PREVIEW()
              })
            }
          })
        })
      } else {
        MessageBox.alert("请先配置唛头");
      }
    },
    doPrintNumber (row) {
      eval(this.global.numberPrint)
      LODOP.SET_PRINT_STYLEA("序列号", "CONTENT", row.serialNumber);
      //打印
      //LODOP.PRINT()
      LODOP.PREVIEW()
    },
    doPrint (row) {
      if (this.template) {
        MessageBox.confirm('是否打印?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          eval(this.template)
          this.printUrl(row.code).then(data => {
            if (data) {
              data.forEach((item, index) => {
                LODOP.SET_PRINT_STYLEA(item.propertyName, "CONTENT", item.propertyValue);
              })
            }
            LODOP.PRINT()
            //打印
            // LODOP.PREVIEW()
          })
        })
      } else {
        MessageBox.alert("请先配置唛头");
      }
    },
    initLodop () {
      LODOP = getLodop()
      LODOP.PRINT_INIT('') //打印初始化
      LODOP.SET_PRINT_MODE("PROGRAM_CONTENT_BYVAR", true);
      LODOP.SET_PRINT_STYLE('FontSize', 18) //设置对象风格
      LODOP.SET_PRINT_STYLE('Bold', 1) ////设置对象风格
      LODOP.SET_PRINT_PAGESIZE(0, 2000, 2000, '') //设定纸张大小
      LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', '55%')//设置缩放
      LODOP.SET_PREVIEW_WINDOW(2, 2, 0, 0, 0, '')//设置窗口
    },
    initTemplate (orderNo) {
      this.templateOp(orderNo).then(data => {
        if (data) {
          this.template = data.template
        }
      })
    },
    templateOp (orderNo) {
      return request({
        url: url.ORDER_TEMPLATE_VIEW_URL,
        method: 'post',
        data: { 'key': 'key' },
        params: { 'orderNo': orderNo }
      })
    },
    printUrl (code) {
      return request({
        url: url.BUSINESS_PRINT_URL,
        method: 'post',
        data: { key: 'key' },
        params: { code: code }
      })
    },
    printAllOp (businessCode) {
      return request({
        url: url.BUSINESS_PRINT_ALL_URL,
        method: 'post',
        data: { key: 'key' },
        params: { businessCode: businessCode }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.w-body {
  padding-top: 8px;
}
.w-table {
  border: 1px solid #ebeef5;
}
.w-table-title {
  border: 1px solid #ebeef5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  width: 100%;
  font-size: 14px;
  color: gray;
}
</style>
